<!-- 社区借用记录-->
<template>
  <div class="borrow">
    <myheader :title="titles" rightBtn="主页" @updataInfo="submitRecruit"></myheader>

    <van-swipe lazy-rende v-if="active==1">
      <van-swipe-item
        style="height:200px;"
        v-for="(items,indexs)  in borrow.imgList "
        :key="indexs"
        @click.stop="bigImg(indexs)"
        fit="contain"
      >
        <van-image :src="items" class="swip_img">
          <template v-slot:loading>
            <van-loading size="20px" vertical>加载中...</van-loading>
          </template>
        </van-image>
      </van-swipe-item>
    </van-swipe>

    <van-swipe lazy-rende v-if="active==0">
      <van-swipe-item
        style="height:200px;"
        v-for="(items,indexs)  in borrow.imgList "
        :key="indexs"
        @click.stop="bigImgitem(indexs)"
        fit="contain"
      >
        <img :src="items" class="swip_img" />
      </van-swipe-item>
    </van-swipe>
    <van-row>
      <p
        style="font-size:0.5rem; text-indent: 2em; padding:16px;"
        class="overflowMore"
      >描述：{{borrow.content}}</p>
    </van-row>

    <van-divider :style="{   borderColor: '#1989fa', padding: '0 16px' }" dashed>资源发布者信息：</van-divider>
    <van-contact-card type="edit" :name="name" :tel="phone" :editable="false" />
    <van-button class="borrowBtn" size="large" hairline type="primary" @click="borrowThis">立即借用</van-button>

    <van-dialog
      :show="shows"
      title="请扫码支付"
      show-cancel-button="true"
      show-confirm-button
      @cancel="shows=false"
      @confirm="shows=false"
    >
      <img style="height:6rem;" class="showpopImg" :src="imgUrl" />
    </van-dialog>
  </div>
</template>

<script>
import formatDateTime from '../../../utils/data'
import myheader from '../../../comon/myheader.vue'
import { ImagePreview, Toast } from 'vant'
import { Dialog } from 'vant'

export default {
  components: {
    myheader,
  },

  data() {
    return {
      borrow: [],
      title: '',
      name: '',
      phone: '',
      show: false,
      index: 0,
      active: 0,
      imgUrl: require('../../../assets/zfb.jpg'),
      shows: false,
    }
  },
  created() {
    this.init()
    this.active = this.$route.params.type
  },

  computed: {
    titles() {
      return '借用物品名称:' + this.title
    },
  },

  methods: {
    onChange(index) {
      this.show != this.show
    },
    formatDateTime(val) {
      return formatDateTime.formatDateTime5(val)
    },
    async init() {
      const res = await this.$axios.get(
        '/item/borrow/info/' + this.$route.params.id
      )
      if (res.data.code == 200) {
        this.borrow = res.data.data
        this.name = res.data.data.user.username
        this.phone = res.data.data.user.phone
        this.title = this.borrow.title
      }
    },
    // 大图
    bigImg(index, indexs) {
      ImagePreview({
        images: this.borrow.imgList, // 预览图片的那个数组
        loop: false,
        closeable: true,
        startPosition: indexs, // 指明预览第几张图
      })
      console.log(indexs)
    },
    // 大图
    bigImgitem(indexs) {
      ImagePreview({
        images: this.borrow.imgList, // 预览图片的那个数组
        loop: false,
        closeable: true,
        startPosition: indexs, // 指明预览第几张图
      })
      console.log(indexs)
    },
    // 借用物品
    borrowThis() {
      if (this.$store.getters.getUserInfo) {
        Dialog.confirm({
          title: '确认借用' + this.title,
          message: this.borrow.content,
        })
          .then(() => {
            this.shows = true
          })
          .catch(() => {
            // on cancel
          })
      } else {
        Toast('请先登录呦 (づ￣3￣)づ╭❤～')
        this.$router.push('/login')
      }
    },
    confirm() {
      this.shows = !this.shows
    },
    submitRecruit() {
      this.$router.push('/home')
    },
  },
}
</script>

<style scoped>
.borrow {
  margin-top: 46px;
}
.van-image {
  width: 86% !important;
  margin-left: 7% !important;
}
.van-cell {
  font-size: 17px !important;
}
.borrowBtn {
  margin-top: 45px;
  width: 80%;
  margin-bottom: 20px;
  margin-left: 10%;
  margin-right: 10%;
}

.showpopImg {
  margin-left: 27%;
  margin-right: 10%;
}
</style>
